23.07.12
오늘 한 일
- Gloddy 개발
- 프로그라피 회의
하루 요약
- 14:00 ~ 22:00 : 집에서 공부
- 22:30 ~ 23:00 : 프로그라피 회의
Gloddy 개발 - Tabs 컴포넌트 로직 변경
Tabs 컴포넌트 로직을 바꾸었다.
기존의 방식은 탭을 누르면 페이지가 이동되도록 구현했는데, 아무래도 모바일에서 웹뷰로 띄울 때는 페이지 이동이 아닌 컴포넌트를 렌더링하는 방식이 더 좋을 것 같아서 바꿨다.
대신 쿼리스트링으로 tab 값을 넘겨주는 방식으로 구현했다.
사용 방법
<Tabs defaultActiveTab="1">
<Tabs.List>
<Tabs.Item value="1" text="탭1" />
<Tabs.Item value="2" text="탭2" />
<Tabs.Item value="3" text="탭3" />
</Tabs.List>
<Tabs.Panel tab="1">탭1 컨텐츠</Tabs.Panel>
<Tabs.Panel tab="2">탭2 컨텐츠</Tabs.Panel>
<Tabs.Panel tab="3">탭3 컨텐츠</Tabs.Panel>
</Tabs>
구현 방법
위 방식을 Compound Component 패턴이라고 한다.
Tabs
먼저, Tabs 컴포넌트를 구현했다.
const TabsContext = createContext<{
activeTab: string;
setActiveTab: (value: string) => void;
} | null>(null);
interface TabsProps {
defaultActiveTab: string;
}
export default function Tabs({ defaultActiveTab, children }: StrictPropsWithChildren<TabsProps>) {
const [activeTab, setActiveTab] = useState(defaultActiveTab);
return (
<TabsContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabsContext.Provider>
);
}
Tabs 컴포넌트는 activeTab과 setActiveTab을 TabsContext에 제공한다.
Tabs.List
Tabs.List 컴포넌트는 Tab 컴포넌트를 렌더링한다.
function List({ children }: StrictPropsWithChildren) {
return <div className="flex h-50 border-b border-white3">{children}</div>;
}
Tabs.Tab
Tabs.Tab 컴포넌트는 TabsContext를 통해 activeTab과 setActiveTab을 받아온다.
interface TabProps {
value: string;
text: string;
queryString?: string;
}
function Tab({ value, text, queryString }: TabProps) {
const { activeTab, setActiveTab } = useContext(TabsContext)!;
const isActive = activeTab === value;
useEffect(() => {
if (isActive) {
const url = new URL(window.location.href);
url.searchParams.set('tab', queryString ?? value);
window.history.replaceState(null, '', url.toString());
}
}, [isActive, queryString, value]);
return (
<div
className={clsx(
'flex flex-1 cursor-pointer items-center justify-center',
isActive && 'border-b-4 border-blue3'
)}
onClick={() => setActiveTab(value)}
>
{text}
</div>
);
}
Tabs.Panel
Tabs.Panel 컴포넌트는 TabsContext를 통해 activeTab을 받아온다.
function Panel({ value, children }: PropsWithChildren<Pick<TabProps, 'value'>>) {
const { activeTab } = useContext(TabsContext)!;
return <div className={activeTab === value ? 'block' : 'hidden'}>{children}</div>;
}
마지막으로 Tabs랑 각 컴포넌트를 연결한다.
Tabs.List = List;
Tabs.Tab = Tab;
Tabs.Panel = Panel;
그럼 끝~~
프로그라피 회의
저번 달 중간 발표 이후로 팀 끼리 소통이 거의 없었고 개발도 거의 진행되지 않았다.
그래서 운영진 측에서 조치를 취해서 오늘 디스코드에서 어떻게 해야할 지에 대한 회의를 진행했다.
원인이 뭐였을까?
- 급조된 기획
- 소통의 부재
나는 후자가 원인이라고 생각한다.
전자도 원인이라고 하면 할 수 있겠지만, 어찌됐든 기획대로 디자인이 나왔고 개발도 어느정도 진행이 되어 중간 발표까지는 마무리했다.
하지만 중간 발표 이후로는 소통이 거의 없었다. 아무래도 우리 팀이 주로 소통하는 공간은 카카오톡 채팅방이었고, 노션도 있었지만 잘 활용하지 않았다.
그렇다보니 파트 간의 진행 상황을 알 수 없었고 또한 어떤 방향으로 개발을 해야할 지에 대한 의견도 공유하지 못했다.
누구 하나 리드하는 사람이 없었기 때문에 이런 상황이 발생했다고 생각한다. 그나마 리드하고 있던 디자이너 분도 동아리에서 탈퇴되어서 더욱 그랬던 것 같다.
나도 팀원들의 참여율을 높이기 위해 회의 시간을 잡아보려고 했지만, 다들 바쁘셔서 회의 시간을 잡기가 쉽지 않았다.
어떻게 해결할 수 있을까?
저저번주에 회장과 각 팀원들과의 1:1 온라인 면담을 진행했었다. 그때 우리 팀의 방향을 몇 가지 제시해주셨다.
- 프로그라피 내부 프로젝트로 전환
- 프로젝트 계속 진행
- 활동 중단
결과적으로는, 오늘 회의를 통해 현재 카공실록 프로젝트를 계속 진행하기로 했다.
업무 관련 내용은 슬랙에서 소통하기로 했다. 데일리 스크럼을 슬랙에 텍스트로만 올리는 방식으로 진행하고, 위클리 스크럼은 디스코드에서 음성으로 진행하기로 했다.
위클리 스크럼 시간을 오후 11시로 잡았는데 아직 요일은 잡지 않았다. 서로의 스케줄에 맞춰 요일을 정할 예정이다.
걱정되는 점
개발이 뜸해지면서 다른 일정들을 많이 만들어놨다. 생각보다 할 일이 많아서 걱정이다.
저번 만큼 많은 시간을 투자해서 개발을 진행할 수는 없겠지만, 최대한 시간을 내서 개발을 진행해야겠다.
내일 할 일
- Gloddy 개발 및 워크숍
- CS 스터디 준비